<template>
  <view class="start-page">
    <view class="start-form">

      <view class="fm-item">
        <text class="item-title"><text class="reqired">*</text>行程:</text>
        <view class="ipt-wrapper">
          <uni-datetime-picker
            v-model="planrange"
            type="daterange"
            :start="minStart"
            rangeSeparator="~"/>
        </view>
      </view>
      
      <view class="fm-item-time">
        <text class="label-tip">预计</text>
        <picker mode="time" :value="startTime" @change="bindStartTimeChange">
						<view class="fm-ipt">{{startTime}}</view>
				</picker>
        <text class="label-tip">到达，</text>
        <picker mode="time" :value="endTime" @change="bindEndTimeChange">
        		<view class="fm-ipt">{{endTime}}</view>
        </picker>
        <text class="label-tip">离开该城市</text>
      </view>
      
      <view class="fm-item">
        <text class="item-title"><text class="reqired">*</text>目的地:</text>
        <view class="addr-selector">
          <view class="addr-selector-wrapper" @click="handleSelectAddr">
            <view class="search">
              <ai-icon type="icon-search" color="var(--gray-3)" v-if="!hasTarget"></ai-icon>
              <text class="text">{{targetText}}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="fm-item">
        <text class="item-title">预算：</text>
        <ai-radio-group :options="budgeList" v-model:value="budge"></ai-radio-group>
      </view>
      <view class="fm-item">
        <text class="item-title">行程特点：</text>
        <ai-checkbox-group :options="featureList" v-model:value="features"></ai-checkbox-group>
      </view>
      <view class="fm-item">
        <text class="item-title">餐饮要求：</text>
        <ai-checkbox-group :options="foodTagList" v-model:value="foodTags"></ai-checkbox-group>
      </view>
      <view class="fm-item">
        <text class="item-title">酒店要求：</text>
        <ai-radio-group :options="hotelList" v-model:value="hotel"></ai-radio-group>
        <view class="ipt-wrapper" v-if="hotel == '4'">
          <view class="search-ipt" @click="onSearchHotelClick">{{startHotel}}</view>
        </view>
      </view>
      
      <view class="fm-item">
        <text class="item-title">其他要求：</text>
        <view class="ipt-wrapper">
          <ai-input-multi placeholder="请输入其他要求" v-model:value="customInput"></ai-input-multi>
          <view class="ipt-tips">
            <text class="tip-title">样例：</text>
            <view class="tip-content">
              <ai-message-swiper :messages="customList" @selected="sampleCustomInput"></ai-message-swiper>
            </view>
          </view>
        </view>
        
      </view>
      
      <view class="btn-box">
         <ai-button color="primary" :block="true" size="lg" @click="hanleStartPlan">开始规划</ai-button>
      </view>
     
    </view>
    
    <tp-footer></tp-footer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        planId: 0,
        planrange: [],
        startTime: "10:00",
        endTime: "17:00",
        budge: "1",
        features:[],
        foodTags: ["0"],
        customInput: "",
        budgeList: [],
        featureList: [],
        hotelList: [],
        foodTagList: [],
        customList: [],
        hotel: "2",
      };
    },
    computed: {
      targetText() {
        let chatCity = this.$store.state.address.chatCity
        return chatCity ? chatCity : '选择目的地'
      },
      hasTarget() {
        let chatCity = this.$store.state.address.chatCity
        return chatCity
      },
      minStart() {
        let date = this.$tools.dateFormat(new Date(), 'yyyy-MM-dd') 
        return date;
      },
      startHotel() {
        let hotel = this.$store.state.hotel.start_hotel
        return hotel ? hotel.label : "请选择酒店"
      },
    },
    onLoad(options) {
      this.planId = options.planId || 0
      this.init()
    },
    mounted() {
      if (this.planId && this.planId > 0) {
        return
      }
      let start = Date.now() + 3*24*3600*1000;
      let end = start + 2*24*3600*1000;
      let startDt = this.$tools.dateFormat((new Date(start)), 'yyyy-MM-dd')
      let endDt = this.$tools.dateFormat((new Date(end)), 'yyyy-MM-dd')
      this.planrange = [startDt, endDt]
    },
    methods: {
      init() {
        this.getProcessingPlan()
        
        let featuerUrl = this.$urls.getApi("featureOptions")
        this.$get(featuerUrl).then(res => {
          let options = res.module
          this.featureList.push(...options)
        })
        
        let budgeUrl = this.$urls.getApi("budgeOptions")
        this.$get(budgeUrl).then(res => {
          let options = res.module
          this.budgeList.push(...options)
        })
        
        let hotelUrl = this.$urls.getApi("hotelOptions")
        this.$get(hotelUrl).then(res => {
          let options = res.module
          this.hotelList.push(...options)
        })
        
        let foodUrl = this.$urls.getApi("foodOptions")
        this.$get(foodUrl).then(res => {
          let options = res.module
          this.foodTagList.push(...options)
        })
        
        let customUrl = this.$urls.getApi("customOptions")
        this.$get(customUrl).then(res => {
          let options = res.module
          this.customList.push(...options)
        })

        if (this.planId && this.planId > 0) {
          let oriReqUrl = this.$urls.getApi("planningOriReq")
          this.$get(oriReqUrl, { data: {planId: this.planId} }).then(res => {
            let req = res.module
            if (req) {
              const {
                startDate, startMin, endDate, endMin, target, budge, tags=[], input,
                hotelFeature, hotelId, hotelName,foodTags=[]
              } = req
              this.planrange = [startDate, endDate]
              this.startTime = startMin
              this.endTime = endMin
              this.budge = budge || "1"
              this.features.push(...tags)
              this.customInput = input || ""
              this.hotel = hotelFeature || "2"
              this.foodTags.push(...foodTags)
            }
          })
        }
      },
      handleSelectAddr() {
        uni.navigateTo({
          url:"/pages/search/address?origin=chat"
        })
      },

      hanleStartPlan() {
        let target = this.$store.state.address.chatCity
        if (!target) {
          this.$toast("请指定目的地")
          return;
        }
        if (!this.planrange || this.planrange.length != 2) {
          this.$toast("请指定行程时间")
          return;
        }
        let custromHotel = this.$store.state.hotel.start_hotel
        if (this.hotel == '4' && !custromHotel) {
          this.$toast("请指定具体的酒店")
          return
        }
        
        let hotelId = '', hotelName = "";
        if (this.hotel == '4') {
          hotelId = custromHotel.value
          hotelName = custromHotel.label
        }

        let ask = {
          startDate: this.planrange[0],
          endDate: this.planrange[1],
          startMin: this.startTime,
          endMin: this.endTime,
          target: target,
          budge: this.budge,
          tags: this.features,
          foodTags: this.foodTags,
          hotelFeature: this.hotel,
          hotelId: hotelId,
          hotelName: hotelName,
          input: this.customInput
        }
        
        let url = this.$urls.getApi("planningAsk")
        this.$post(url, {
          data: ask
        })
        .then(res => {
          let module = res.module
          if (!module || !module.planId) {
            this.$toast("网络繁忙，请稍后重试")
          }
          let planId = module.planId
          
          uni.navigateTo({
            url: `/pages/plan/process?planId=${planId}`
          })
        })
      },
      
      async getProcessingPlan() {
        let url = this.$urls.getApi("planningPlan")
        let res = await this.$get(url)
        let module = res.module
        if (!module) {
          return
        }
        const { planId } = module
        this.planId = planId
        uni.navigateTo({
          url: `/pages/plan/process?planId=${planId}`
        })
      },
      
      onSearchHotelClick() {
        let city = this.$store.state.address.chatCity || ""
        let custromHotel = this.$store.state.hotel.start_hotel
        let hotelName = ""
        if (custromHotel) {
          hotelName = custromHotel.label
        }
        let url = `/pages/search/hotel?origin=start&city=${city}&keywords=${hotelName}`
        uni.navigateTo({
          url: url
        })
      },
      
      sampleCustomInput(e) {
        this.customInput = e.label
      },
      bindStartTimeChange(e) {
        //console.log("bindStartTimeChange:", e)
        this.startTime = e.detail.value
      },
      bindEndTimeChange(e) {
        //console.log("bindEndTimeChange:", e)
        this.endTime = e.detail.value
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .start-page {
    padding: $gutter;
  }

  .start-form {
    .fm-item {
      display: flex;
      flex-direction: column;
      margin-top: $gutter;

      .item-title {
        font-size: $font-size-md;
        // font-weight: $font-weight-bold;
        color: var(--gray-2);
      }

      .uni-ipt {
        margin-top: 6px;
      }

      &:first-child {
        margin-top: 0
      }
    }
    .fm-item-time {
      display: flex;
      flex-direction: row;
      margin-top: $gutter * 0.5;
      align-items: center;
      
      .label-tip {
        padding: 0 4px;
        color: var(--gray-2);
        &:first-child {
          padding-left: 0;
        }
      }
    }
    .fm-ipt {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: $input-width;
      height: 34px;
      color: var(--gray-2);
      //min-height: $input-min-height;
      margin: $input-margin;
      padding: $input-padding;
      border: $input-border;
      border-radius: $input-border-radius;
      background: $input-bg;
      cursor: pointer;
    }
  }
  
  .addr-selector {
    box-sizing: border-box;
    margin-top: 6px;
  
    .addr-selector-wrapper {
      position: relative;
      display: flex;
      border: 1px solid var(--gray-5);
      background-color: var(--white);
      height: 32px;
      line-height: 32px;
      border-radius: 12px;
      padding: 0 $gutter;

      .search {
        font-size: $font-size-md;
  
        .text {
          color: var(--gray-3);
          padding: 0 12px 0 6px
        }
      }
    }
  }
  
  .reqired {
    color: $brand-1;
    padding-right: 4px;
  }
  
  .ipt-wrapper {
    margin-top: 6px;
    
    .ipt-tips {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      .tip-title {
        color: $blue;
      }
      .tip-content {
        flex: 1;
      }
    }
  }
  
  .search-ipt {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: $input-width;
    height: 32px;
    color: var(--gray-2);
    //min-height: $input-min-height;
    margin: $input-margin;
    padding: $input-padding;
    border: $input-border;
    border-radius: $input-border-radius;
    background: $input-bg;
    cursor: pointer;
  }
  
  .btn-box {
    margin-top: 24px;
  }
  
</style>
